Core Web Vitals

從零打造前端效能監控系統 | WebConf Taiwan 2023 逐字稿

從零打造前端效能監控系統 | WebConf Taiwan 2023 逐字稿

Sentry Cypress Web Vitals Memori Loading Performance Rendering Performance Core Web Vitals 效能監控 Real User Monitoring GitHub Actions CI/CD Chrome DevTools End-to-End Testing Google Analytics Lighthouse Synthetic Monitoring active monitoring cypress.io passive monitoring 加載效能 效能調校 端對端測試 自動化測試 轉譯效能 sharing WebConf Taiwan 前端效能 系列文 · 留言


利用 Cypress 和 Sentry 測試前端效能

在自動化測試前端效能時,可能會考慮的解法有:(1) Lighthouse CI Action 或 web-vitals library + 丟到某個地方做資料儲存和 dashboard;另一個解法是 (2) 利用 Cypress + Sentry 來取得相關資訊並做呈現。這篇文章會針對 Cypress + Sentry 這個解法做說明,並比較兩種解法。

Sentry Cypress End-to-End Testing GitHub Actions Lighthouse Loading Performance Rendering Performance Synthetic Monitoring active monitoring Web Vitals Memori 轉譯效能 加載效能 效能監控 效能調校 CI/CD Core Web Vitals cypress.io lighthouse-cli 端對端測試 自動化測試 前端效能 系列文 · 留言


利用 React Context API + useReducer 實作 Redux

要選 Redux 還是 context API + useReducer 來做狀態管理呢?context API + useReducer 能完全取代 Redux 嗎?

react hooks react.js redux Web Vitals Loading Performance Rendering Performance front-end architecture Core Web Vitals 加載效能 效能調校 sharing · 留言


2021 年度回顧

這是我在 2021 年最值得聊聊的幾件事 (*´∀`)~♥

年度回顧 MOPCON 公路車 健身 高蛋白料理 旅遊 讀書會 閱讀 職涯 打造高速網站,從網站指標開始!全方位提升使用者體驗與流量的關鍵 Web Vitals Core Web Vitals SEO 搜尋引擎優化 效能調校 健身女孩安安 甜點 減醣 減糖 DIY 生活 Netflix Testable JavaScript 可測試的 JavaScript WorldGym · 留言


導讀《打造高速網站,從網站指標開始!全方位提升使用者體驗與流量的關鍵》逐字稿@新竹敏捷

導讀《打造高速網站,從網站指標開始!全方位提升使用者體驗與流量的關鍵》逐字稿@新竹敏捷

Web Vitals 效能調校 打造高速網站,從網站指標開始!全方位提升使用者體驗與流量的關鍵 Core Web Vitals SEO 搜尋引擎優化 趨勢科技 Trend Micro · 留言


關於「打造高速網站,從網站指標開始!全方位提升使用者體驗與流量的關鍵」這本書的點滴

關於這本書「打造高速網站,從網站指標開始!全方位提升使用者體驗與流量的關鍵」的點點滴滴。

Web Vitals 效能調校 打造高速網站,從網站指標開始!全方位提升使用者體驗與流量的關鍵 Core Web Vitals SEO 搜尋引擎優化 MOPCON 趨勢科技 Trend Micro · 留言


打造高速網站,從網站指標開始!(Speed Up Your App with Web Vitals) MOPCON 2021 逐字稿

MOPCON 逐字稿

MOPCON Web Vitals 打造高速網站,從網站指標開始!全方位提升使用者體驗與流量的關鍵 Core Web Vitals SEO 搜尋引擎優化 效能調校 Firebase Performance Firebase Image Optimization Lighthouse Loading Performance lighthouse-cli sharing 加載效能 圖片最佳化 趨勢科技 Trend Micro Real User Monitoring Synthetic Monitoring Mixtini 前端效能 系列文 · 留言


Lighthouse Metrics:以使用者為出發點來探討效能的指標

本文說明 Lighthouse 以使用者為出發點來探討效能的指標。

Lighthouse RAIL Web Vitals 效能調校 Core Web Vitals Loading Performance 加載效能 sharing Synthetic Monitoring active monitoring Real User Monitoring passive monitoring 趨勢科技 Trend Micro 前端效能 系列文 · 留言


響應式圖片(Responsive Images)

在行動裝置上關於圖片常遇到圖檔體積過大或解析度不佳等問題,這些問題可經由選擇適當的圖片格式、壓縮、設定適合的尺寸、依照解析度提供適當的圖片來解決,本文要探討的是如何在 HTML 上使用 picture 與 img srcset sizes 來讓瀏覽器根據自身環境選擇適當的圖檔。

圖片最佳化 效能調校 加載效能 Image Optimization Loading Performance 響應式網頁 Responsive Web Design Media Query Core Web Vitals Web Vitals 前端效能 系列文 · 留言